<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/headerCss.css">
</head>
<style>
   
    /* ... */
    .jiao {
        position: absolute;
        bottom: 0;
        left: 50px;
        width: 0;
        height: 0;
        border: 8px solid #E02C32;
        border-top-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
    }
    .query {
        width: 100%;
        height: 38px;
        padding: 21px 3%;
        white-space: nowrap;
    }
    .list {
        width: 6%;
        min-width: 100px;
        height: 38px;
        text-align: center;
    }
    .line {
        display: inline;
        margin: 0 36px;
        width: 2px;
        height: 42px;
        border-left: 2px solid #AFAEAF;
    }
    .query .se {
        width: 16%;
        min-width: 251px;
        height: 38px;
        border: 1px solid #AFAEAF;
    }
    .icon {
        position: absolute;
        top: 2px;
        right: 6px;
        width: 24px;
        height: 24px;
    }
    .sear {
        display: inline;
        position: relative;
    }
    .query div {
        display: inline;
    }
    .zuo input {
        width: 8%;
        min-width: 140px;
        height: 38px;
        border: 1px solid #AFAEAF;
    }
    .pos {
        position: relative;
    }
    .zuo {
        margin-left: 10px;
        font-size: 16px;
        color: #333333;
    }
    .sylr {
        width: 8%;
        min-width: 140px;
        height: 38px;
    }
    article {
        background-color: #fff;
        width: 100%;
    }
    .container {
        margin-left: 3%;
        margin-right: 4%;
        margin-top: 10px;
        overflow: hidden;
    }
    table {
        border-color: #E6E6E6;
        width: 100%;
        border-bottom: 0;
        border-right:0;
    }
    table tr td:nth-last-child(1){
        border-right: 1px solid #E6E6E6;
        z-index: 999;     
    }
    table >thead >tr {
        background-color: #fcf6e8;
        border: solid 1px #fcefc7;
    }
    table tbody tr {
        background-color: #fcfbf8;
    }
    table tbody tr:nth-child(2n-1) {
        background-color: #fff;
    }
    table >tbody tr:hover {
        background-color: #fff9f5;
    }
    table td {
        padding: 10px 20px;
        font-size: 16px;
        color: #333333;
        border: 0;
        border-bottom: 1px solid #E6E6E6;

    }
    .btn button
    {
        margin-left: 25px;
        width: 5%;
        height: 38px;
        background-color: #D6BE7F;
        border-radius: 5px;
        color: #ffffff;
    }
    button:hover {
        background-color: rgba(0,0,0,0.1);
        color: #333333;
    }
    .tl:hover {
        background-color: rgba(0,0,0,0.1);
        color: #333333;
    }
    table .tl {
        width: 60px;
        height: 28px;
        font-family: SourceHanSansSC-Normal;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        color: #ffffff;
        background-color: #D6BE7F;
        border-radius: 5px;
    }
    .cou {
        float: left;
        margin-top: 10px;
    }
    .cou img{
        width: 17px;
        height: 17px;
    }
    .pagin {
        float: right;
        overflow: hidden;
        margin-top: 21px;
    }
    .pagin li {
        float: left;
        width: 30px;
        height: 30px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #cccccc;
        margin: 6px;
        text-align: center;
        line-height: 30px;
        list-style: none;
        cursor: pointer;
        transition: all .4s;
        font-family: SourceHanSansCN-Light;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        color: #999999;
    }
    .pagin li:nth-last-child(1) {
        margin-right: 0;
    }
    .pagin li:nth-last-child(1),
    .pagin li:nth-child(1) {
        width: 60px;
        height: 16px;
        border: 0;
        font-family: SourceHanSansCN-Light;
        font-size: 16px;
    }
    .fontColor {
        color: #cccccc;
    }
    li:hover {
        transform: scale(1.2);
        border: solid 1px #d6be7f;
    }
    .pagin .bodColor {
        border: solid 1px #d6be7f;
    }
</style>
<body>
    <header>
        <div class="hd">
            <div class="logo">
                <a><img src="./img/组%2017(4).png"/></a>
                <select>
                    <option>藏品</option>
                    <option>藏品</option>
                </select>
            </div>
            <div class="userinfo"> 
                <a>
                <img src="./img/logo(1).png" />               
                </a> 
                <select>
                    <option>叶文洁</option>
                    <option>退出</option>
                </select>         
            </div>
        </div>
        <div class="menu">
            <div class="courcolor">
                <img src="./img/组2.png"/>
                <a href="#">藏品入库</a>
            </div>
            <div>
                <img src="./img/组2.png"/>
                <a href="#">藏品展示</a>
            </div>
            <div>
                <img src="./img/组3.png"/>
                <a href="#">回收站</a>
            </div>
            <div>
                <img src="./img/组%204.png"/>
                <a href="#">操作记录</a>
        </div>

        </div>
        <div class="query">
            <select class="list">
                <option>藏品列表</option>
            </select>
            <div class="line"></div>
            <div class="sear">
                <input class="se" type="search" value="请输入作品名或其他关键字搜索" />
                <img class="icon" src="img/搜索.png"/>
            </div>
            <div class="zuo">
                作者:
                <input type="search" value="请输入作者姓名" />
            </div>
            <div class="zuo">
                类别:
                <select class="sylr">
                    <option>油画</option>
                    <option>油画</option>
                    <option>油画</option>
                </select>
            </div>
            <div class="zuo">
                入藏年份:
                <select class="sylr">
                    <option>全部</option>
                    <option>油画</option>
                    <option>油画</option>
                </select>
            </div>
            <div class="zuo">
                来源:
                <select class="sylr">
                    <option>全部</option>
                    <option>油画</option>
                    <option>油画</option>
                </select>
            </div>
            <div class="btn">
                <button>导入</button>
                <button>导出</button>
            </div>
        </div>
    </header>

    <div class="bdline"></div>
    <article>
        <div class="container">
        <table border="1" cellspacing="0">
            <thead>
             <tr>
                 <td>藏品登记号</td>
                 <td>分类号</td>
                 <td>商品名称</td>
                 <td>尺寸</td>
                 <td>入藏日期</td>
                 <td>类别</td>
                 <td>创作年代</td>
                 <td>实际数量</td>
                 <td>作者</td>
                 <td>质地</td>
                 <td>工艺技法<div>></div></td>
                 <td>操作</td>
             </tr>
            </thead>
            <tbody>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>

                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>20200001</td>
                    <td>20200001</td>
                    <td>怀恋梵高</td>
                    <td>70*90CM</td>
                    <td>2020-08-08</td>
                    <td>油画</td>
                    <td>1990年</td>
                    <td>1</td>
                    <td>梵高</td>
                    <td>未知</td>
                    <td>油布油画</td>
                    <td>
                        <button class="tl">首页展示</button>
                        <button class="tl">查看</button>
                        <button class="tl">编辑</button>
                        <button class="tl">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="cou">
            <img src="img/组%2017@2x(1).png"/>
            馆藏油画: 200幅
        </div>
        <div class="pagin">
            <ul>
                <li>
                    <a href="#" class="fontColor">
                        <span>上一页</span>
                    </a>
                </li>
                <li class="bodColor">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>...</li>
                <li>99</li>
                <li>
                    <a href="#">
                        <span>下一页</span>
                    </a>
                </li>
            </ul>
        </div>
        </div>
    </article>
    <script>
        let divs = document.querySelectorAll('.menu div')
        let spanj = document.getElementsByClassName('jiao')
        console.log(divs)
        for(let i =0; i< divs.length; i++) {
            divs[i].onclick = function() {
                for(var j = 0; j < divs.length;j++){
                    divs[j].removeAttribute("class")
                }
                this.className = 'courcolor'
            }
        }

    </script>
</body>
</html>
